<%--
  Created by IntelliJ IDEA.
  User: 42585
  Date: 2021/1/25
  Time: 18:32
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>登录页</title>

    <script src=" webjars/jquery/3.5.1/jquery.js"></script>
    <script src="webjars/bootstrap/4.5.3/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="webjars/bootstrap/4.5.3/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/login.css">

    <script>
        function loginfirst() {
            //判断属性值是否为空，增加判断是因为给按钮添加属性后，属性不会被调用需要二次点击，而二次点击回造成死循环，所以判断属性值为空不在调用方法。
            if($('#inn').attr('data-toggle') == null) {
                let user = $('#login-form').serializeArray();
                $.ajax({
                    //注：请求方式delete只能通过url地址进行数据传递
                    method: "post",
                    url: "${pageContext.request.contextPath}/login",
                    data: user,
                    dataType: "json",
                    success: function (result) {
                        //通过判断返回参数判断调转权限
                        if (result.code === 201) {
                            window.location.href = "${pageContext.request.contextPath}/screenui";
                        } else if (result.code === 200) {
                            //bootstrap弹窗属性的添加
                            $('#inn').attr('data-toggle','modal');
                            $('#inn').attr('data-target','#myModal');
                            //默认二次点击事件
                            $('#inn').trigger('click');
                        } else if(result.code===500){
                            alert("登录失败");
                            window.location.href = "${pageContext.request.contextPath}/loginui";
                        }
                    },
                    error() {
                        window.location.href = "${pageContext.request.contextPath}/false";
                    }
                });
            }
        }

        function users(){
            window.location.href = "${pageContext.request.contextPath}/screenui";
        }

        function managers(){
            window.location.href = "${pageContext.request.contextPath}/navigationui";
        }

        function register() {
            window.location.href = "${pageContext.request.contextPath}/registerui";
        }

    </script>

</head>
<body>

<h1 id="ti">世界医药科技</h1>

<%--//注：表单提交只有post和put请求--%>
<form id="login-form" action="/" method="post">

    <ul>
        <li>
            <div class="input-group" id="yong">
                <span class="input-group-addon"></span>
                <input type="text" name="username" class="form-control" aria-label="..." placeholder="请输入用户名"/>
            </div>
        </li>
        <li>
            <div class="input-group" id="mi">
                <span class="input-group-addon"> </span>
                <input type="password" name="password" class="form-control" aria-label="..." placeholder="请输入密码"/>
            </div>
        </li>
        <li class="inset">
            <div class="btn-group btn-group-justified" role="group" aria-label="..." id="nnn">
                <div class="btn-group" role="group" id="in">
                    <%--//隐藏弹窗按钮，通过属性添加与否判断是否使用弹窗--%>
                    <input type="button" value="登录" class="btn btn-success " id="inn" onclick="loginfirst()"/>
                </div>
                <div class="btn-group" role="group" id="set">
                   <%-- //注册按钮，实现页面跳转--%>
                    <input type="button" value="注册" class="btn btn-primary" onclick="register()"/>
                </div>
            </div>
        </li>
    </ul>
</form>

<%--//管理员登录选择进入页面弹窗，引用bootstrap框架，通过给按钮添加格式属性的方式添加--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">登录选择页面</h4>
            </div>
            <div class="modal-body">
                用户页面或者管理员页面
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="managers()">用户页</button>
                <button type="button" class="btn btn-primary" onclick="users()">管理员页</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
